<template>
  <div class="hot-major">
    <div class="container">
      <div class="title">
        <img :src="hotMajorLogo" alt="" />
        <span>热门专业</span>
      </div>
      <div class="list">
        <div
          class="list-item"
          v-for="(item, index) in props.majorList"
          :key="index"
          @click="jumpToMajorDetail(item)"
        >
          <span
            :style="{
              color: index < 3 ? '#FF8000' : '#999999',
              fontWeight: 700,
            }"
            >{{ index + 1 }}</span
          >
          <div>{{ item.tagName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import hotMajorLogo from '@/assets/images/hotMajorLogo.png';
import { watch, ref } from 'vue';

import { useRouter } from 'vue-router'; // 导入路由
const router = useRouter();

const props = defineProps({
  majorList: {
    type: Array,
    default: () => [],
  },
});
const jumpToMajorDetail = (item) => {
  router.push({
    name: 'MajorDetail',
    query: {
      positionTagId: item.positionTagId,
      tagName: item.tagName,
      cateType: item.cateType,
    },
  });
};
</script>

<style lang="scss" scoped>
.hot-major {
  width: 884px;
  border-radius: 42px;
  border: 2px solid transparent;
  background-image: linear-gradient(#f7fbfe, #f7fbfe),
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(206, 231, 245, 1));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(24px);
  position: relative;
  padding: 32px;
  box-sizing: border-box;
  .container {
    .title {
      display: flex;
      align-items: center;
      img {
        width: 38px;
        height: 38px;
        margin-right: 19px;
      }
      span {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 30px;
        color: #008bff;
      }
    }
    .list {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 50px;
      height: 480px;
      padding-top: 68px;
      box-sizing: border-box;
      .list-item {
        height: 40px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30px;
        color: #333333;
        display: flex;
        align-items: center;
        span {
          margin-right: 30px;
          font-size: 36px;
          margin-top: 4px; // 本质上是要垂直居中的，浏览器效果正确但是pad上不对，所以加个margin-top
        }
      }
    }
  }
}
</style>
